<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        iframe 优缺点
            1.内容隔离
            <iframe> 嵌入的内容运行在一个独立的上下文中，与主页面完全隔离。
            即使嵌入的页面崩溃或出错，也不会影响主页面的正常运行。

            2. 跨域嵌入
            可以嵌入不同域名的内容（如 YouTube 视频、Google Maps、第三方广告等），实现跨域内容整合。
            不需要服务器端代理即可展示外部资源。

            3. 简化集成
            第三方服务（如支付网关、地图、视频平台）通常提供 <iframe> 嵌入代码，开发者只需复制粘贴即可使用，集成简单快捷。

            4. 安全性（一定程度）
            由于同源策略的限制，主页面和 <iframe> 内容之间默认无法直接访问对方的 DOM 或 JavaScript，防止恶意脚本直接操控。
            可通过 sandbox 属性进一步限制 <iframe> 的权限（如禁止脚本执行、表单提交等）。

            5. 并行加载
            <iframe> 中的内容可以与主页面并行加载，提升整体页面加载效率（尤其是对于重型外部资源）。

            6. SEO 友好（对嵌入方）
            搜索引擎可以独立索引 <iframe> 中的内容，有利于内容提供方的 SEO。

        缺点
            1. 性能开销
            每个 <iframe> 都会创建一个新的浏览上下文（browsing context），占用额外的内存和 CPU 资源。
            过多的 <iframe> 可能导致页面变慢，尤其是在移动设备上。

            2. SEO 问题（对主页面）
            搜索引擎通常不会将 <iframe> 中的内容视为主页面的一部分，因此这些内容不会提升主页面的关键词排名。
            <iframe> 内容的链接权重也不会传递给主页面。

            3. 用户体验问题
            <iframe> 内容可能无法很好地适配主页面的布局，尤其是在响应式设计中，容易出现滚动条嵌套、布局错位等问题。
            用户无法直接通过浏览器的前进/后退按钮控制 <iframe> 内部的导航历史。

            4. 跨域通信复杂
            主页面与不同源的 <iframe> 之间通信必须使用 postMessage() API，增加了开发复杂性。
            安全性需谨慎处理，避免 XSS 或信息泄露。

            5. 可访问性挑战
            屏幕阅读器等辅助技术可能难以正确解析 <iframe> 内容，影响无障碍访问。
            需要为 <iframe> 添加 title 属性以提高可访问性。

            6. 移动端适配困难
            在移动设备上，<iframe> 可能无法正确缩放或触发手势操作（如双指缩放地图）。
            某些移动浏览器对 <iframe> 支持有限。

            7. 安全风险（若配置不当）
            如果 sandbox 属性未正确设置，恶意网站可能通过 <iframe> 进行点击劫持（Clickjacking）攻击。
            可通过设置 X-Frame-Options 或 Content-Security-Policy 头部来防止被嵌套。

        总结:
                优点	隔离性好、集成简单、支持跨域、安全性可控
                缺点	性能开销大、SEO 不友好、用户体验差、通信复杂
    -->
</body>
</html>